<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
<table width="50%" align="center" id="tb" border="1" cellspacing="0">
    <tr align="center">
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   /* $("tr:first").each(function(index,ele){
        this.style.backgroundColor="pink";
    });
    $("tr:gt(0):even").each(function(){
        this.style.backgroundColor="red";
    });
    $("tr:gt(0):odd").each(function(){
        this.style.backgroundColor="yellow";
    });*/

   for (let i = 0; i <3; i++) {
       $("table").append("<tr align='center'>\n"+
           "<td>1</td>\n"+
           "<td>2</td>\n"+
           "<td>3</td>\n"+
           "<td>4</td>\n"+
           "<td>5</td>\n"+
           "</tr>")
   }

   /*$("table").delegate("tr","mouseover",function(){
       $(this).css("background","yellow");
   });
   $("table").delegate("tr","mouseout",function(){
       $(this).css("background","white");
   });*/
    $("tr:first").css("backgroundColor","gray");
    $("tr:gt(0):even").css("backgroundColor","red");
    $("tr:gt(0):odd").css("backgroundColor","yellow");
</script>
</html>